/*
 * @description: 描述内容
 */
/*
 * @description: 描述内容
 */
import dayjs, { Dayjs } from "dayjs";
import "./index.scss";
import MonthCalendar from "./MonthCalendar";
import Header from "./Header";
import { CSSProperties, ReactNode, useState } from "react";
import cs from "classnames";
import LocaleContext from "./LocaleContext";

export interface CalendarProps {
  value: Dayjs;
  style?: CSSProperties; //用于最外层容器
  className?: string | string[]; //用于最外层容器
  dateRender?: (currentDate: Dayjs) => ReactNode; //日期单元格的整个覆盖连带日期的数字一起
  dateInnerContent?: (currentDate: Dayjs) => ReactNode; //日期单元格的额外信息
  locale?: string; //国际化
  onChange?: (date: Dayjs) => void; //选择了日期之后会触发的回调。
}

function Calendar(props: CalendarProps) {
  const { className, style, locale, value, onChange } = props;
  const classNames = cs("calendar", className);

  const [curValue, setCurValue] = useState<Dayjs>(value);

  function selectHandler(date: Dayjs) {
    setCurValue(date);
    setCurMonth(date);
    onChange?.(date);
  }

  const [curMonth, setCurMonth] = useState<Dayjs>(value);

  function prevMonthHandler() {
    setCurMonth(curMonth.subtract(1, "month"));
  }

  function nextMonthHandler() {
    setCurMonth(curMonth.add(1, "month"));
  }

  function todayHandler() {
    const date = dayjs(Date.now());
    setCurValue(date);
    setCurMonth(date);
    onChange?.(date);
  }

  return (
    <LocaleContext.Provider value={{ locale: locale || navigator.language }}>
      <div className={classNames} style={style}>
        <Header
          curMonth={curMonth}
          prevMonthHandler={prevMonthHandler}
          nextMonthHandler={nextMonthHandler}
          todayHandler={todayHandler}
        ></Header>
        <MonthCalendar
          {...props}
          value={curValue}
          curMonth={curMonth}
          selectHandler={selectHandler}
        ></MonthCalendar>
      </div>
    </LocaleContext.Provider>
  );
}

export default Calendar;
